<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>请准备</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">


    <!--<link rel="stylesheet" href="../assets/css/amazeui.min.css">-->
    <link rel="stylesheet" href="../assets/js/layui/css/layui.css">
    <link rel="stylesheet" href="../assets/css/global.css">


    <!--<link rel="stylesheet" href="../assets/css/index.css">-->



    <style>
        .app-main{
        }
        .game_time{
            position: relative;
            display: none;
        }
        .pie { width:200px; height:200px; border-radius:100px; position:absolute; }
        .pie1 { clip:rect(0px,200px,200px,100px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg);
            -webkit-transform:rotate(0deg); background-color:#e9bb4e; }
        .pie2 { clip:rect(0px,100px,200px,0px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg);
            -webkit-transform:rotate(0deg); background-color:#e9bb4e; }

        .hold { width:200px; height:200px; position:absolute; z-index:1;}
        .bg { width:200px; height:200px; border-radius:200px; position:absolute; background-color:#9f3be6;}

        .time { width:194px; height:194px; margin:3px 0 0 3px; background-color:#6b1db9; border-radius:160px;
            position:absolute; z-index:1; text-align:center; line-height:194px; font-size:123px;
            color: #EABCFB;}

        .title1{
            clear: both;
            color: #FFF;
            display: block;
            margin-top: 225px;
            font-size: 15px;
        }
        .title2{
            color: rgba(255,255,255,0.8);
            display: block;
            margin-top: 15px;
            font-size: 12px;
        }
    </style>

</head>
<body>
<div class="app-bg"></div>

<div class="app-main">

    <!--倒计时组件-->
        <div class="game_time">
            <div class="hold">
                <div class="pie pie1" ></div>
            </div>
            <div class="hold">
                <div class="pie pie2"></div>
            </div>
            <div class="bg"></div>
            <div class="time">5</div>




        </div>
    <div id="timebb" style="text-align: center">
        <span class="title1">5秒后开始答题，请准备！</span>
        <span class="title2">（每道题答题时间为10秒钟）</span>
    </div>
    <!--倒计时组件End-->



</div>



<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="../assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--<script src="../assets/js/amazeui.min.js"></script>-->
<script src="../assets/js/layui/layui.js"></script>
<script src="../assets/js/global.js"></script>

<script src="../assets/js/time.js"></script>
<!--页面内js-->
<script>

    var challenge_id = getQueryString('challenge_id');
    var answer_log_id = getQueryString('answer_log_id');
    layui.use(['layer'], function () {
        var  layer = layui.layer;

        initGlobalPage();

        initPage();
        //倒计时

        function initPage(){
            $('.game_time').css('display','inline-block');
            $('.game_time').css({'top':(winH-200)*0.35+"px",'left':(winW-200)*0.5+"px"});
            $('#timebb').css('marginTop',(winH-200)*0.35+220+'px');

            if(!challenge_id||!answer_log_id){
                layer.msg('非法操作',function(){
                    window.location.href = '/pages/index.html';
                })
            }else {
                //开始倒计时
                countDown();
            }
        }
    });


</script>
</body>
</html>
